<template>
    <div class="execute-restore">
      <h2>执行恢复</h2>
      <el-form :model="restoreForm" label-width="100px">
        <el-form-item label="选择备份文件">
          <el-select v-model="restoreForm.file" placeholder="请选择">
            <el-option v-for="file in backupFiles" :key="file.id" :label="file.name" :value="file.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="恢复目标">
          <el-radio-group v-model="restoreForm.target">
            <el-radio label="Current Instance">当前实例</el-radio>
            <el-radio label="Specified Instance">指定实例</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="恢复选项">
          <el-radio-group v-model="restoreForm.option">
            <el-radio label="Overwrite Existing Data">覆盖现有数据</el-radio>
            <el-radio label="Preserve Existing Data">保留现有数据</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleExecuteRestore">执行恢复</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const backupFiles = ref([
    { id: 1, name: 'backup_20230826.rdb' },
    { id: 2, name: 'backup_20230825.rdb' },
    { id: 3, name: 'backup_20230824.rdb' },
  ]);
  
  const restoreForm = ref({
    file: 'backup_20230826.rdb',
    target: 'Current Instance',
    option: 'Overwrite Existing Data',
  });
  
  const handleExecuteRestore = () => {
    alert('执行恢复');
  };
  </script>